<!--
* @Description: In User Settings Edit
* @Author: your name
* @Date: 2019-10-17 18:39:15
 * @LastEditTime: 2019-10-23 10:08:16
 * @LastEditors: Please set LastEditors
-->
<template>
<div class="container">
<van-nav-bar title="上传视频" left-arrow fixed :border="false"
      @click-left='$router.push("/")'/>

 <van-button class="upload_btn" size="small" type="info" >
      <input type="file" accept="video/avi,video/mp4,video/flv,video/3gp,video/swf"  @change="onFileChange">
      请选择或者拍摄视频上传
 </van-button>

<video class="video" ref="video" v-show="showVideo" width="300" height="300" controls="controls"></video>
<div style="padding:20px">
    <van-progress  :percentage="videoProgress" stroke-width="10" color="#FE5D51"></van-progress>
</div>

<van-button style="margin-left:20px" size="small" type="info"  @click.native="complete">确认上传</van-button>

</div>
</template>
<script>
import axios from "axios";
import { Toast } from 'vant';
export default {
    data(){
        return{
            videoProgress:0,
            typeName:"视频",
            file:{},
            showVideo:false,
            url:'/'
        }
    },
    methods: {
        onFileChange: function (e) {
            this.videoProgress = 0;
            var files = e.target.files || e.dataTransfer.files;
            if (!files.length) return;
            //视频上传
            if(this.typeName == '视频'){
            let _this = this;
            this.showVideo = true;
            //视频预览
            var reader = new FileReader();
                this.file = files[0];
                reader.onload = function () {
                    _this.$refs.video.src = this.result;
                };
                reader.readAsDataURL(this.file);
            }
        },
        //提交
        complete(){
            if(!this.showVideo){
                Toast("请先选择视频");
                return;
            }
            let _this = this;
            if(this.typeName == '视频'){
                let data = new FormData();
                data.append('file',this.file);
                data.append('arr_name',this.file.name);
                //进度百分比
                var config = {
                        onUploadProgress: progressEvent => {
                            console.log('progressEvent',progressEvent);
                            var complete = (progressEvent.loaded / progressEvent.total * 100 | 0)
                            this.videoProgress = complete;
                        }
                }
                axios.post(_this.url,data,config).then( res => {
                    Toast.success('上传成功');
                }).catch((error)=>{
                    console.log('error',error);
                    Toast.fail("上传失败");
                })
            }
        },
}
}
</script> 
<style lang="less" scoped>
.upload_btn{
    margin:20px;
    display:block;
    position:relative;
    overflow:hidden;
}
.upload_btn input{
    width:100%;
    height:100%;
    opacity:0;
    position:absolute;
    left:0;
    top:0;
}
.video{
   display:block;
   margin:0 auto;
}
</style>